var bus = new Vue();


//搜索框
Vue.component('search-pannel', {
    template: "#search-pannel-template",
    data: function () {
        return {
            //部门
            secList: [
                {
                    value: '财务部',
                    label: '财务部'
                },
                {
                    value: '开发部',
                    label: '开发部'
                },
                {
                    value: '行政部',
                    label: '行政部'
                },
            ],
            secModel: '',
            //职位
            postList: [
                {
                    value: '总经理',
                    label: '总经理'
                },
                {
                    value: '普通职员',
                    label: '普通职员'
                },
                {
                    value: '总监',
                    label: '总监'
                },
            ],
            postModel: '',
            //权限
            limitList: [
                {
                    value: '权限1',
                    label: '权限1'
                },
                {
                    value: '权限2',
                    label: '权限2'
                },
                {
                    value: '权限3',
                    label: '权限3'
                },
            ],
            limitModel: '',
            searchModel:''

        }

    },
    watch: {
        secModel: function () {
            this.getSearchData()
        },
        postModel: function () {
            this.getSearchData()
        },
        limitModel: function () {
            this.getSearchData()
        }
    },
    methods: {
        getSearchData: function () {
            $.getJSON(
                '../data/company/mock_user.json',
                { secModel: this.secModel, postModel: this.postModel, limitModel: this.limitModel, search:this.searchModel },
                function (res) {
                    if (res.IsSuccess) {
                        bus.$emit('on-search', res.ResultObject)
                    }
                }, function (err) {

                }
            )
        }
    },
});

//表格内容
Vue.component('table-pannel', {
    template: "#table-pannel-template",
    components: {
        paging: Paging,
    },
    data: function () {
        return {
            deletePos: false,
            tempDelDataId:'',
            /*默认排序*/
            sort: [
                {
                    value: 'morenpaixuy',
                    label: '默认排序1',
                },
                {
                    value: 'morenpaixue',
                    label: '默认排序2'
                },
                {
                    value: 'morenpaixus',
                    label: '默认排序3'
                }
            ],
            defaultSort: '',
            columnsHead: [],
            staffTableData: []

        }
    },
    created: function () {
        var that = this
        this.initData()
        this.initColumnsHead()
        bus.$on('on-search', function (tableData) {
            that.staffTableData = tableData
        })
    },
    computed: {
        maleNumber: function () {
            var num = 0
            this.staffTableData.forEach(function (t, number) {
                if (t.sex ===  "1"){
                    num++
                }
            })
            return num
        },
        femaleNumber: function () {
            var num = 0
            this.staffTableData.forEach(function (t, number) {
                if (t.sex ===  "0"){
                    num++
                }
            })
            return num
        }
    },
    methods: {
        initColumnsHead : function () {
            var that = this
          this.columnsHead = [
              {
                  type: 'selection',
                  width: 80,
                  align: 'center'
              },
              {
                  title: '操作',
                  width: 80,
                  render: (function (h, params) {
                      return h('div', [
                          h('Tooltip', {
                              attrs: {
                                  placement: 'top',
                                  content: '编辑'
                              }
                          }, [
                              h('p', {
                                  attrs: {
                                      class: 'editStaff',
                                      type: 'primary'
                                  },
                                  on: {
                                      click: function () {
                                          $(".list-details").css({display: 'block'});
                                          $(".zhezhao").css({display: 'block'});
                                          bus.$emit('user-info', params.row)
                                      }
                                  }
                              })
                          ]),
                          h('Tooltip', {
                              attrs: {
                                  placement: 'top',
                                  content: '删除'
                              }
                          }, [
                              h('p', {
                                  attrs: {
                                      class: 'cancelStaff',
                                      type: 'primary'
                                  },
                                  on: {
                                      click: function () {
                                          that.tempDelDataId = params.row.id
                                          that.deletePos = true
                                      }
                                  }
                              })
                          ])
                      ])
                  })
                  // render: (function (index) {
                  //     if (index.id == 1) {
                  //         return (
                  //         '<Tooltip placement="top" content="编辑"> <p class="editStaff" type="primary" @click="editStaff = true"></p></Tooltip>' +
                  //         '<Tooltip placement="top" content="删除"> <p class="cancelStaff" type="primary" @click="cancelStaff = true"></p></Tooltip> ')
                  //     } else {
                  //         return (
                  //             '<Tooltip placement="top" content="编辑"> <p class="showStaff" type="primary" @click="editStaff = true"></p></Tooltip>' +
                  //             '<Tooltip placement="top" content="删除"> <p class="cancelStaff" type="primary" @click="cancelStaff = true"></p></Tooltip> '
                  //         )
                  //     }
                  //
                  // })
              },
              {
                  title: '姓名',
                  // width: 120,
                  key: 'name'
              },
              {
                  title: '联系方式',
                  // width: 120,
                  key: 'contact'
              },
              {
                  title: '部门',
                  // width: 120,
                  key: 'section'
              },
              {
                  title: '职位',
                  // width: 120,
                  key: 'post'
              },
              {
                  title: '性别',
                  // width: 120,
                  width: '5%',
                  key: 'sex'
              },
              {
                  title: '出生日期',
                  // width: 150,
                  key: 'birthDate'
              },
              {
                  title: '入职日期',
                  // width: 150,
                  key: 'entryDate'
              },
              {
                  title: '转正时间',
                  // width: 150,
                  key: 'regularDate'
              },
              {
                  title: '籍贯',
                  // width: 200,
                  key: 'from'
              }
          ]
        },
        handleSuccessDel: function () {
            var that = this
            this.staffTableData.forEach(function (t,index) { {
                if (t.id === that.tempDelDataId){
                    that.staffTableData.splice(index,1)
                }
            } })
            $.ajax({
                type: 'post',
                url: '../data/common/mock_post_ok.json',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ id: this.tempDelDataId }),
                dataType: "json"
            }).done(function (res) {

            })
        },
        exportData: function () {
            this.$refs.table.exportCsv({
                filename: 'data',
                columns: this.columnsHead.filter(function (col, index) {
                    return index > 1
                }),
                data: this.staffTableData.filter(function (col, index) {
                    return index + 1
                })
            });
        },
        initData: function () {
            var that = this
            $.getJSON("../../data/company/mock_user_info.json")
                .done(function (res) {
                    if (res.IsSuccess) {
                        that.staffTableData = res.ResultObject
                    }
                })
        },
        changePage: function (value) {
            $.getJSON(
                '../data/company/mock_user.json',
                {page: value},
                function (res) {
                    if (res.IsSuccess) {
                        bus.$emit('on-search', res.ResultObject)
                    }
                }, function (err) {

                }
            )
        }
    },
});
var app = new Vue({
    el: "#app",



})